<template>
  <div class="editdish">
    <el-dialog title="修改菜品" :visible.sync="dialogVisible" width="900px">
      <el-form :data="editFrom" style="margin-left: -30px">
        <el-form-item :label-width="formLabelWidth">
          <span><span class="xin">*</span>菜品名称:</span>
          <el-input
            v-model="editFrom.name"
            style="width: 200px"
            placeholder="请输入菜品名称"
          ></el-input>
          <span style="padding-left: 220px"
            ><span class="xin">*</span>菜品分类:</span
          >
          <el-select
            v-model="editFrom.categoryId"
            style="width: 200px"
            placeholder="请选择菜品分类"  >
             <el-option
              v-for="(item, index) in Dishdata"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <span><span class="xin">*</span>菜品价格:</span>
          <el-input
            v-model="editFrom.price"
            style="width: 200px"
            placeholder="请输入菜品价格"
          ></el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth">
          <span style="margin-left: -18px">口味做法配置:</span>
          <div class="dish_txt">
            <div style="padding-left: 20px; padding-top: 15px">
              <span style="font-size: 12px">口味名(3个字内,可按回车添加)</span>
            </div>

            <div style="display: flex; padding-left: 10px" >
              <el-select
            v-model="taste"  :clearable="true"
            style="width: 150px;text-align:center;"
            placeholder="请选择口味">
             <div v-if="editFrom.flavors">
            <el-option
              v-for="(item, index) in tastelist"

              :key="index"
              :label="item.name"
              :value="index">

              {{item.name}}

            </el-option>
            </div>

            </el-select>

            <!-- 显示口味 -->
               <div class="tasteArr">
                <div v-if="taste!==''">

                  <span   style="color:rgb(243, 218, 106);height:32px;" class="tasteArr_span"  v-for="(item,index) in tastelist[taste].value" :key="index" >

                 {{ item }} </span>
                </div>

              </div>
              <el-button @click="deltaste" style="border: none; color: red"
                >删除</el-button
              >
            </div>

            <el-input style="margin-left:10px;margin-top:20px;width: 150px"  @keyup.enter.native="addtaste"  :clearable="true" maxlength="10"

                v-model="flavo"
                type="text"
                placeholder="请输入味道"
              />

            <div style="padding-left: 20px; padding-top: 20px">
              <el-button
                @click="addtaste"
                style="border: none; background-color: orange; color: black"
                >添加口味</el-button
              >
            </div>
          </div>
        </el-form-item>

        <!-- 上传图片 -->
        <el-form-item style="width: 80%" :label-width="formLabelWidth">
          <div style="display: flex">
            <span style="padding-right: 40px"
              ><span class="xin">*</span>菜品图片:</span
            >

            <el-upload
            :disabled="disabled"
              class="avatar-uploader"
              action="http://localhost:8080/admin/dish/upload"
              :file-list="fileList"

              :limit="limit"
              :drag="true"

              :before-upload="beforeAvatarUpload"
              :on-preview="handlePictureCardPreview"
              :on-success="handleSuccess"
               @mouseenter.native="handleMouseEnter"
               @mouseleave.native="handleMouseLeave"

              name="image"
            >

              <div  class="img_icon" v-show="isshow">
                  <i   @click="handleRemove" class="el-icon-delete"></i>
                  <i @click="handlezoom"  class="el-icon-zoom-in"></i>

                </div>
              <img  v-if="editFrom.image" :src="editFrom.image" class="avatar" />

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>

            </el-upload>
             <!-- 图标弹窗蒙层 -->

            <!-- 展示删除图片和放大的效果 -->

            <!-- 备注 -->
            <div style="padding-left: 20px; margin-top: -10px">
              <p>图片大小不超过2M </p>
              <p>仅能上传PNG JPEG JPG类型图片 </p>
              <p>建议上传200*200的图片 </p>
            </div>
          </div>
        </el-form-item>

        <!-- 菜品描述 -->

        <el-form-item :label-width="formLabelWidth" style="display: flex">
          <div><span>菜品描述:</span></div>
          <div style="margin-left:80px;margin-top:-40px">
            <el-input
              :rows="3"
              style="width: 700px"
              v-model="editFrom.description"
              type="textarea"
              placeholder="菜品描述，最长200字"
              maxlength="200"
            ></el-input>
          </div>
        </el-form-item>

        <div style="padding-top:10px;margin-left:80px">
          <el-button
            @click="updatedish(editFrom)"
            style="margin-left: 120px; width: 150px"
            type="primary"
            >保存修改</el-button
          >
          <el-button
            @click="cancel"
            style="margin-left: 300px; width: 150px"
            type="info"
            >取消</el-button
          >
        </div>
      </el-form>
    </el-dialog>

                 <!-- 图片弹窗 -->

       <el-dialog  width="40%" :visible.sync="dialogVisibleimg" >
              <img  width="100%" :src="editFrom.image" alt="">
             </el-dialog>
  </div>
</template>

<script>
import Bus2 from '@/utils/EventBus'
import { getdish, dishCategory, updatedish } from '@/api/dish'

export default {
  name: 'editdishIndex',

  data () {
    return {
      // 图片数据

      disabled: false, // 禁用上传按钮
      isshow: false,
      limit: 1,
      fileList: [],
      dialogVisibleimg: false,

      // 分类数据
      Dishdata: [],
      taste: '', // 味道name
      flavo: '', // 添加味道
      tastelist: [
        { name: '甜度', value: ['超甜'] },
        { name: '辣度', value: ['超辣'] },
        { name: '酸度', value: ['超酸'] }
      ], // 口味
      index: '',
      editFrom: {
        name: '',
        categoryId: '',
        price: '',
        flavors: [],
        image: 'http://localhost:8080/image/34158e37-9d59-41c2-9871-8ece9ba26dd3.png',
        description: '',
        status: 1
      }, // 弹窗数据

      dialogVisible: false,
      formLabelWidth: '80px'

    }
  },

  created () {
    this.initdishcategory()

    Bus2.$on('updatedish', (dishid, dialogVisible) => {
      this.dialogVisible = dialogVisible

      this.getdish(dishid)
    })
  },
  beforeDestroy () {
    Bus2.$off('updatedish')
  },

  methods: {
    // 回显菜品
    async getdish (dishid) {
      const res = await getdish(dishid)
      this.editFrom = res.data
      console.log(this.editFrom)
      //  this.tastelist = res.data.flavors
      res.data.flavors.forEach((item) => {
        if (item.name === '甜度') {
          this.taste = 0
          this.tastelist[this.taste].value = item.value.split(',')
        }
        if (item.name === '辣度') {
          this.taste = 1
          this.tastelist[this.taste].value = item.value.split(',')
        }
        if (item.name === '酸度') {
          this.taste = 2
          this.tastelist[this.taste].value = item.value.split(',')
        }
      })

      // console.log(this.editFrom)
    },

    // 初始化菜品分类数据
    async initdishcategory () {
      const type = 1
      const res = await dishCategory(type)
      this.Dishdata = res.data.records
      //  console.log(res.data.records)
    },

    //  修改菜品
    async updatedish (editFrom) {
      console.log(editFrom, 'editfrom1')
      console.log(this.editFrom, 'editfrom2')
      const flavor = { id: '', dishId: '', name: '', value: '' }
      flavor.name = this.tastelist[this.taste].name
      flavor.value = this.tastelist[this.taste].value.join()

      // 判断有的菜品没有添加口味
      if (editFrom.flavors.length !== 0) {
        flavor.id = this.editFrom.flavors[0].id
        flavor.dishId = this.editFrom.flavors[0].dishId
      }

      editFrom.flavors.push(flavor)
      if (editFrom.flavors.length > 1) {
        editFrom.flavors.shift()
      }
      console.log(editFrom, 'editfrom')
      const res = await updatedish(editFrom)
      if (res.code === 1) {
        this.$message.success('修改菜品数据成功')
      } else {
        this.$message.success('修改菜品数据失败')
      }
      this.dialogVisible = false
      location.reload() // 刷新
    },
    // 取消
    cancel () {
      this.dialogVisible = false
      this.editFrom = ''
    },
    addtaste () {
      // 添加口味
      this.tastelist[this.taste].value.push(this.flavo)

      this.$message.success('添加成功')
      // this.this.flavo = ''
    },
    deltaste () {
      // 删除口味
      this.tastelist[this.taste].value.pop()

      this.$message.success('已删除')
    },

    //  图片处理

    // 图片处理
    handlePreview (file) {
      this.editFrom.image = file
    },
    handleSuccess (response, file, fileList) {
      // 假设服务器返回的结果中包含图片路径的属性是 'url'
      console.log('图片路径:', response)
      this.editFrom.image = response.data
    },
    // 删除图片
    handleRemove (file, fileList) {
      this.disabled = true

      this.editFrom.image = ''
      this.limit = this.limit + 1
      console.log(file)
      this.isshow = false
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleMouseEnter () {
      // 上传时鼠标移入事件
      this.isshow = true
      // console.log('+++++++++++', 'event')
    },
    handleMouseLeave () {
      // 处理鼠标移出逻辑
      this.isshow = false
      this.disabled = false
      // console.log('Mouse left the upload area.')
    },
    // 放大图片
    handlezoom () {
      this.disabled = true
      this.dialogVisibleimg = true
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG和PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="less" secped>
.el-button btu1 el-button--info {
  margin-left: 10%;
}
.xin {
  color: red;
  padding-right: 2px;
}
.el-input {
  padding-left: 10px;
}
// 口味做法配置
.dish_txt {
  width: 650px;
  height: 180px;
  margin-top: -6%;
  margin-left: 10.5%;
  padding-bottom: 50px;
  /* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(184, 14, 14, 0.058);
  border-radius: 5px;
}
.tasteArr {
  width: 60%;
  padding-left: 5px;
  border: 1px solid rgba(0, 0, 0, 0.103);
  margin-left: 30px;
  border-radius: 5px;
  display: flex;

}
  .tasteArr_span {
  font-size: 12px;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  margin-left: 10px;
   color: rgb(243, 218, 106);
  border: 1px solid rgb(243, 218, 106);

}

/* 图片上传 */

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: -25px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 120px;
  line-height: 178px;
  text-align: center;
  margin-top: 80px;

}

  .el-upload.el-upload--text{
   width: 178px;
    height: 178px;
    img{
 /* 或 relative, fixed, sticky */
       width: 178px;
     height: 178px;
    }
 }
 // 上传删除图标
 .img_icon{
   display: flex;
    position: absolute; /* 或 relative, fixed, sticky */
  z-index: 9999; /* 设置一个很高的值确保在最上层 */
  color: rgb(250, 245, 245);

  width: 50px;
  height: 50px;
  font-size: 30px;
  margin-left: 30px;
  margin-top: 70px;
 }
 .el-icon-zoom-in{

   margin-left: 50px;

 }
 //隐藏
 ::v-deep.hide .el-upload--picture-card {
  display: none;
}
.el-upload-list.el-upload-list--text{
  display: none;
}

p {
  font-size: 12px;
}

</style>
